<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取添加图层上的点线信息</title>
    <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.2/minemap.css">
    <script src="http://minedata.cn/minemapapi/v1.2/minemap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
        }

        html, body {
            margin: 0;
            padding: 0;
        }

        #pannel {
            position: absolute;
            right: 10%;
            top: 5%;
            width: auto;
            z-index: 2;
        }

        #pannel {
            position: absolute;
            right: 20%;
            width: auto;
            top: 5%;
            z-index: 2;
        }
    </style>
</head>
<body>
<div id="map">
</div>
<div id="pannel">
    <button id="addNopassRoad" onclick="addNopassRoad()">添加交通管制</button>
    <button id="registryNopassRoad" onclick="registryNopassRoad()">录入交通管制</button>
    <button id="addAlternateRoute" onclick="addAlternateRoute()">添加管制绕行路段</button>
    <button id="registryAlternateRoute" onclick="registryAlternateRoute()">录入管制绕行路段</button>
</div>

<script>

    /**
     * 目前的layer  type 属性有6种分别是
     * fill 面
     * line 线
     * symbol 点
     * circle 圆
     * extrusion 建筑物
     * sprite 动态粒子
     * 前三种最为常用，extrusion和sprite需要特殊属性支持。
     */

    minemap.accessToken = '25cc55a69ea7422182d00d6b7c0ffa93';
    minemap.solution = 716;
//    minemap.spriteUrl = 'sprite'
    var map = new minemap.Map({
        container: 'map',
        style: "http://minedata.cn/minemapapi/baotou/poidisplay.json",
        center: [116.464, 39.925],
        zoom: 14.5,
        pitch: 0
    });

    var mapStatus = 0 //0不操作地图，1添加限行路，2添加绕行路

    var source_data = {
        "type": "FeatureCollection",
        "features": []
    }
    class NopassPoint_geojson {
        constructor(){
            this.type = "Feature"
            this.properties = {
                "title": "道路管制路线点集",
                "type": "nopass_road",
            }
            this.geometry = {
                "type": "Point",
                "coordinates": []
            }
    }
    }

    class NopassRoad_geojson {
        constructor(){
        this.type = "Feature"
        this.properties = {
            "title": "道路管制路线",
            "type": "nopass_road",
        }
        this.geometry =  {
            "type": "LineString",
            "coordinates": []
        }
    }

    }
    class AlternateRoute_geojson {
        constructor(){
            this.type = "Feature"
            this.properties = {
                "title": "道路管制绕行路线",
                "type": "alternate_routes"
            }
            this.geometry =  {
                "type": "LineString",
                "coordinates": []
            }
        }

    }

    var noPassArray = [
        [116.47829955796192, 39.92974717886085],
        [116.47818753736175, 39.92290740478305],
        [116.4781037979671, 39.917061299296364],
    ]
    var alternateRouteArray = [
        [116.47822959404607, 39.93117540897708],
        [116.47271915625748, 39.93088246099535],
        [116.46702933172702, 39.92932337387529],
        [116.46705967743304, 39.92646107671209],
        [116.46715071464143, 39.923203031868894],
        [116.4697604475084, 39.92292376368053],
        [116.46957837282793, 39.916570104179186],
        [116.47680994610067, 39.91570894007086],
        [116.47792934018287, 39.91562666693278],
    ]

    map.on("load", function () {
        init_map()
        initRoadManagement()
    })

    var popup = new minemap.Popup({
        closeButton: false,
        closeOnClick: false
    });


    /**
     * map的事件可以是：
     * click     ：鼠标点击时触发
     * mousemove ：鼠标移动时触发
     * mousedown ：鼠标按下时触发
     * mouseout  ：鼠标移出时触发
     * dblclick  ：双击时触发，注意不要与地图默认的鼠标双击zoom放大冲突
     * zoomend   ：切换zoom级别时触发(鼠标滚轮滑动等)
     */

    map.on('click', function (e) {
        var lngLat = e.lngLat;
        if (mapStatus == 1) {
            noPassArray.push([lngLat.lng, lngLat.lat])
            displayChosedRoadLine(noPassArray)
        }
        if (mapStatus == 2) {
            alternateRouteArray.push([lngLat.lng, lngLat.lat])
            displayChosedRoadLine(noPassArray)
        }
    });

    function addNopassRoad() {
        mapStatus = 1
        noPassArray.length = 0
    }

    function addAlternateRoute() {
        mapStatus = 2
        alternateRouteArray.length = 0
    }
    function registryNopassRoad() {
        map.removeLayer("chosedPointLine_layer")
        addAndDisplayNopassRoad()
    }
    function registryAlternateRoute() {
        map.removeLayer("chosedPointLine_layer")
        addAndDisplayAlternateRoad()
    }
    function displayChosedRoadLine(points) {
        var data = {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {
                        "title": "录入管制",
                        "type": "nopass_road",
                    },
                    "geometry": {
                        "type": "LineString",
                        "coordinates": points
                    }
                }
            ]
        }
        if (!map.getSource("chosedPointLine_source")) {
            map.addSource("chosedPointLine_source", {
                "type": "geojson",
                "data": data

            });
        }
        if (!map.getLayer("chosedPointLine_layer")) {
            map.addLayer({
                "id": "chosedPointLine_layer",
                "type": "line",
                "source": "chosedPointLine_source",
                "layout": {
                    "line-join": "round",
                    "line-cap": "round"
                },
                "paint": {
                    "line-color": "#333333",
                    "line-width": 6
                },
            });
        } else {
            map.getSource("chosedPointLine_source").setData(data)
        }
    }
    function init_map() {
        map.addSource("pointSource", {
            "type": "geojson",
            "data": source_data

        });
        map.addLayer({
            "id": 'nopass_points',
            "type": "symbol",
            "source": "pointSource",
            "layout": {
                "icon-image": "airport",
                "text-field": "{title}",
                "text-offset": [0, 0.6],
                "text-anchor": "top"
            },
            "paint": {
                "icon-color": "#0000ff"
            },
            filter: ['in', 'type', 'nopass_point']
        });
        map.addLayer({
            "id": "nopass_road",
            "type": "line",
            "source": "pointSource",
            "layout": {
                "line-join": "round",
                "line-cap": "round"
            },
            "paint": {
                "line-color": "#ff0000",
                "line-width": 6
            },
            filter: ['in', 'type', 'nopass_road']
        });
        map.addLayer({
            "id": "alternate_route",
            "type": "line",
            "source": "pointSource",
            "layout": {
                "line-join": "round",
                "line-cap": "round"
            },
            "paint": {
                "line-color": "#0000ff",
                "line-width": 6
            },
            filter: ['in', 'type', 'alternate_routes']
        });

        map.addLayer({
            "id": "alternate_routes_arrow",
            "type": "symbol",
            "source": "pointSource",
            "layout": {
                "icon-image": "arrow_right", //airport
                "symbol-placement": "line",
                "symbol-spacing": 35,
                "icon-allow-overlap": true,
//                "icon-ignore-placement":true,
            },
            filter: ['in', 'type', 'alternate_routes']
        });
    }
    function initRoadManagement() {
        addAndDisplayNopassRoad()
        addAndDisplayAlternateRoad()
    }
    function addAndDisplayAlternateRoad() {
        var alternateRoute_geojson = new AlternateRoute_geojson()
        alternateRoute_geojson.geometry.coordinates = alternateRouteArray
        source_data.features.push(alternateRoute_geojson)
        map.getSource("pointSource").setData(source_data)
    }
    function addAndDisplayNopassRoad() {
        noPassArray.map(function (lnglat) {
            var nopassPoint_geojson = new NopassPoint_geojson()
            nopassPoint_geojson.geometry.coordinates = lnglat
            source_data.features.push(nopassPoint_geojson)
        })
        var nopassRoad_geojson = new NopassRoad_geojson()
        nopassRoad_geojson.geometry.coordinates = noPassArray
        source_data.features.push(nopassRoad_geojson)
        map.getSource("pointSource").setData(source_data)

    }


</script>
</body>